<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      /* 宽度 = 内容 + 内边距padding + 边框border */
      /* 下面这个盒子模型， 设置widht 300px 最后就一定是300px */
      /* box-sizing: border-box; */
      /* 下面是默认的盒子模型，宽度会变，我们给盒子设置width:300px; 最后可能会变 */
      /* box-sizing: content-box; */
    }
    html { 
      font-size: 80px;
    }
    body {
      font-size: 16px;
    }
    .box {
      width: 200px;
      height: 100px;
      /* border-width 宽度稍微宽一些，不然看不清楚边框图片，至少10以上 */
      border: 20px solid #ccc;
      /* css3 的新属性 */
      border-image-source: url(images/border.jpg);
      /* 如果不用slice裁剪，那么就会在四个角将 整个图片放上去，看起来比较小 */
      /* 下面的是 使用用 # 四条线将我们的 图片裁剪，slice的 上右下左 裁剪的距离就是 自己量出来的距离 */
      border-image-slice: 170 170 170 170;
      /* 中间切掉的图像，怎么排列，是拉伸还是重复，自己选属性 */
      /* repeat 图像不是很完整，有断的地方， round 完整的图像连接起来， strech 拉伸，默认就是拉伸 */
      border-image-repeat: round;
      /* border-image-width: 170px; */
    }

    .box2 {
      /* 盒子模型， 怪异盒子模型 */
      width: 300px;
      height: 100px;
      border: 15px solid #ccc;
      border-image-source: url(images/border.png);
      border-image-slice: 51 38 20 132;
      border-image-repeat: repeat;
      /* border-image-width: 0.6375rem 0.475rem 0.25rem 1.65rem; */
      /* 用这个的话，盒子最后的宽度都是15px，只是切图的时候盒子里面的内容会多一些 */
      /* border-image-width: 51px 38px 20px 132px;  */
      /* 用下面的就是真实的将 盒子的边框border进行了修改 */
      border-width: 51px 38px 20px 132px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box2">123213</div>
</body>
</html>